<template>
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :keyboard="false"
    :destroyOnClose="true"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">
    
    <a-spin :spinning="confirmLoading">
      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="基本信息" key="1">
          <a-form :form="form">
            <a-row>
              <a-col :span="12">
                <a-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入项目名称" v-decorator="['projectName']" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入客户名称" v-decorator="['customerName']" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入联系人" v-decorator="['contactPerson']" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入联系电话" v-decorator="['contactPhone']" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="项目状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select v-decorator="['status']" placeholder="请选择项目状态" :disabled="true">
                    <a-select-option :value="0">未开始</a-select-option>
                    <a-select-option :value="1">进行中</a-select-option>
                    <a-select-option :value="2">已完成</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="项目金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number style="width: 100%" placeholder="请输入项目金额" v-decorator="['projectAmount']" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-date-picker style="width: 100%" v-decorator="['startDate']" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-date-picker style="width: 100%" v-decorator="['endDate']" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="省市区" :labelCol="{span: 3}" :wrapperCol="{span: 19}">
                  <j-area-linkage type="cascader" v-decorator="['area']" :disabled="true"/>
                  <span v-if="!model.area && (model.provinceName || model.cityName || model.areaName)" style="margin-left: 10px; color: #666;">
                    {{ formatAreaText() }}
                  </span>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="详细地址" :labelCol="{span: 3}" :wrapperCol="{span: 19}">
                  <a-textarea placeholder="请输入详细地址" v-decorator="['address']" :rows="2" :disabled="true"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="项目描述" :labelCol="{span: 3}" :wrapperCol="{span: 19}">
                  <a-textarea placeholder="请输入项目描述" v-decorator="['description']" :rows="4" :disabled="true"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage'
  import JAreaLinkage from '@/components/jeecg/JAreaLinkage'
  import pick from 'lodash.pick'
  import moment from 'moment'

  export default {
    name: "ProjectDetailModal",
    components: {
      JAreaLinkage
    },
    data() {
      return {
        title: "项目详情",
        width: 800,
        visible: false,
        model: {},
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
        confirmLoading: false,
        form: this.$form.createForm(this),
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        provinceName: '',
        cityName: '',
        areaName: '',
      }
    },
    methods: {
      show(record) {
        this.visible = true
        this.model = Object.assign({}, record)
        
        // 处理省市区数据
        this.provinceCode = record.provinceCode || ''
        this.cityCode = record.cityCode || ''
        this.areaCode = record.areaCode || ''
        this.provinceName = record.provinceName || ''
        this.cityName = record.cityName || ''
        this.areaName = record.areaName || ''
        
        // 构建区域数组数据
        if (this.provinceCode) {
          const areaArray = [this.provinceCode]
          if (this.cityCode) {
            areaArray.push(this.cityCode)
            if (this.areaCode) {
              areaArray.push(this.areaCode)
            }
          }
          
          if (areaArray.length > 0) {
            this.model.area = areaArray
          }
        }
        
        // 处理日期
        if (record.startDate) {
          this.model.startDate = moment(record.startDate)
        }
        if (record.endDate) {
          this.model.endDate = moment(record.endDate)
        }
        
        // 确保status是数字类型
        if(record.status !== undefined && record.status !== null) {
          this.model.status = Number(record.status)
        }
        
        this.$nextTick(() => {
          this.form.resetFields()
          this.form.setFieldsValue(pick(this.model, [
            'projectName',
            'customerName',
            'contactPerson',
            'contactPhone',
            'status',
            'projectAmount',
            'startDate',
            'endDate',
            'area',
            'address',
            'description'
          ]))
        })
      },
      handleOk() {
        this.handleCancel()
      },
      handleCancel() {
        this.visible = false
      },
      formatAreaText() {
        let areaText = []
        if (this.provinceName) areaText.push(this.provinceName)
        if (this.cityName && this.cityName !== '市辖区') areaText.push(this.cityName)
        if (this.areaName) areaText.push(this.areaName)
        return areaText.length > 0 ? areaText.join('/') : '未设置区域'
      }
    }
  }
</script>

<style scoped>
  /* 表格横向滚动样式 */
  .ant-table-wrapper {
    overflow-x: auto;
  }
  .ant-table-body {
    overflow-x: auto !important;
  }
  /* 适配小屏幕设备 */
  @media screen and (max-width: 1200px) {
    .ant-table-content {
      overflow-x: auto;
    }
  }
</style> 